<template>
  <chart :options="options" />
</template>

<script>
export default {
  name: 'echartsNewLine',
  props: {
    title: {
      type: String,
      default: ''

    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    dimensions: {
      type: Array,
      default: () => {
        return null
      }
    },
    units: {
      type: Array,
      default: () => {
        return null
      }
    },
    name: {
      type: Array,
      default: () => {
        return null
      }
    },
    colors: {
      type: Array,
      default: () => {
        return null
      }
    },
    type: {
      type: Array,
      default: () => {
        return []
      }
    },
    legend: {
      type: Array,
      default: () => {
        return null
      }
    },
    symbolSize: {
      type: Number,
      default: 3
    },
    smooth: {
      type: Boolean,
      default: () => {
        return null
      }
    },
    boundaryGap: {
      type: Boolean,
      default: () => {
        return null
      }
    },
    fontSize: {
      type: Number,
      default: () => {
        return 20
      }
    },
    color: {
      type: String,
      default: () => {
        return ''
      }
    },
    right: {
      type: String,
      default: () => {
        return '8%'
      }
    },
    left: {
      type: String,
      default: () => {
        return '3%'
      }
    },
    bottom: {
      type: String,
      default: () => {
        return '5%'
      }
    },
    top: {
      type: String,
      default: () => {
        return '15%'
      }
    },
    barWidth: {
      type: Number,
      default: () => {
        return 100
      }
    },
    barBorderRadius: {
      type: Array,
      default: () => {
        return []
      }
    },
    paddingone: {
      type: Array,
      default: () => {
        return [10, 10, 10, 0]
      }
    },
    num: {
      type: Number,
      default: () => {
        return null
      }
    },
    isRadius: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    position: {
      type: Array,
      default: () => {
        return []
      }
    },
    baifen: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    showtooltip: {
      type: Boolean,
      default: () => {
        return true
      }
    }
  },
  computed: {
    options () {
      const _this = this
      const series = []
      const yAxis = []
      for (let i = 0; i < this.legend.length; i++) {
        if (this.isRadius) {
          series.push({
            type: this.type[i],
            name: this.legend[i],
            symbol: 'circle',
            smooth: this.smooth,
            barWidth: this.barWidth,
            // yAxisIndex: i,
            itemStyle: {
              barBorderRadius: [15, 15, 0, 0]
              // borderColor: '#fff',
              // borderWidth: 1
            }
          })
        } else {
          series.push({
            type: this.type[i],
            name: this.legend[i],
            symbol: 'circle',
            smooth: this.smooth,
            barWidth: this.barWidth,
            // yAxisIndex: i,
            itemStyle: {
              // barBorderRadius: [15,15,0,0],
              // borderColor: '#fff',
              // borderWidth: 1
            }
          })
        }
      }
      for (let i = 0; i < this.units.length; i++) {
        if (!this.baifen) {
          yAxis.push({
            name: this.units[i],
            nameLocation: 'end',
            position: this.position[i],
            nameGap: 6,
            scale: false,
            axisLabel: {
              interval: 0,
              color: '#ccc',
              fontSize: this.fontSize
            },
            nameTextStyle: {
              fontSize: this.fontSize,
              color: '#ccc',
              algin: 'left',
              padding: this.paddingone
            },
            show: true,
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#315070'],
                width: 1,
                type: 'dashed'
              }
            },
            // x: 'center',
            // min: function (value) {
            //   return value.min - 10;
            // },
            type: 'value'
          })
        } else {
          yAxis.push({
            name: this.units[i],
            nameLocation: 'end',
            position: this.position[i],
            nameGap: 6,
            scale: true,
            axisLabel: {
              interval: 0,
              color: '#ccc',
              fontSize: this.fontSize,
              formatter: '{value}%'
            },
            nameTextStyle: {
              fontSize: this.fontSize,
              color: '#ccc',
              algin: 'left',
              padding: this.paddingone
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#315070'],
                width: 1,
                type: 'dashed'
              }
            },
            show: true,
            // x: 'center',
            // min: function (value) {
            //   return value.min - 10;
            // },
            type: 'value'
          })
        }
      }
      return {
        color: this.colors,
        title: {
          text: this.title
        },
        grid: {
          containLabel: true,
          left: this.left,
          top: this.top,
          right: this.right,
          bottom: this.bottom
        },
        tooltip: {
          show: this.showtooltip,
          trigger: 'item',
          borderColor: 'rgba(255,255,255,.3)',
          backgroundColor: 'rgba(13,5,30,.6)',
          borderWidth: 1,
          padding: 5
        },
        legend: {
          show: true,
          left: 'right',
          top: 'top',
          icon: 'circle',
          textStyle: {
            color: this.color,
            fontSize: this.fontSize
          },
          selectedMode: false,
          itemWidth: 13,
          itemHeight: 7,
          data: this.legend
        },
        dataset: {
          dimensions: this.dimensions,
          source: this.data
        },
        xAxis: {
          type: 'category',
          name: this.name,
          boundaryGap: this.boundaryGap,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#255a8a'
            }
          },
          nameTextStyle: {
            fontSize: 20,
            color: '#ccc',
            algin: 'left',
            padding: this.paddingone
          },
          axisLabel: {
            interval: 0,
            color: this.color,
            fontSize: this.fontSize,
            // rotate: 30
            formatter: function (params) {
              if (_this.num != null) {
                var newParamsName = '' // 最终拼接成的字符串
                var paramsNameNumber = params.length // 实际标签的个数
                var provideNumber = _this.num // 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = '' // 表示每一次截取的字符串
                    var start = p * provideNumber // 开始截取的位置
                    var end = start + provideNumber // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber)
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr // 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params
                }
                // 将最终的字符串返回
                return newParamsName
              } else {
                return params
              }
            }
          }
        },
        yAxis: yAxis,
        series: series
      }
    }
  }
}
</script>

<style scoped lang="less">
.echartsNewLine {
}
</style>
